var win = Ext.create('WebMeV.view.Register');

var signin = Ext.create('Ext.button.Button',{
    text: 'Sign In',
    itemId: 'signin',
    id: 'signin',
    style: 'height: 20px;margin-bottom: 5px'
});

signin.on('click', function(btn, e){
    if (e.button !== 0)
        e.preventDefault();
    var form = btn.up('form').getForm();
    if(form.isValid()){
        Ext.Ajax.request({
            url : 'login',
            method:'POST',
            params : {
                loginData: Ext.encode(form.getValues())
            },
            scope : this,
            success : function(response, opts) {
                //Received response from the server
                response = Ext.decode(response.responseText);
                if(response.success){
                    Ext.MessageBox.alert('Login success', response.message);
//                    Ext.get('login').setStyle('display','none');
//                    this.application.viewport.removeAll();
//                    this.application.viewport.add(items); 
                }else 
                    Ext.MessageBox.alert('Login failed', response.message);
        
            },
            failure : function(err) {
                //Alert the user about communication error
                Ext.MessageBox.alert('Error occured during Login', 'Please try again!');
            }
        });
    }
});


var register = Ext.create('Ext.button.Button',{
    text: 'Register',
    style: 'height: 20px;margin-bottom: 5px'
});

register.on('click', function(btn, e){
    if (e.button !== 0)
        e.preventDefault();
    Ext.getBody().mask();
    if(!win){
        win = Ext.create('WebMeV.view.Register');
//        win.setPosition(e.getX()-450, e.getY()+20, false);
        win.show();
    } else{
//        win.setPosition(e.getX()-450, e.getY()+20, true);
        win.show();
    }
});

Ext.define('WebMeV.view.LoginForm', {
    extend: 'Ext.form.Panel',
    alias : 'widget.loginform',
    id: 'loginform',
    cls: 'ui-ribbonbar',
    //cls: 'login',
    //standardSubmit: true,
    bodyBorder: false, 
    border: false, 
    hideBorders: true,
    frame:false,
    layout: 'hbox',
    width : 560,
    height: 22,
    listeners: {
        render: function(p){
            //            p.getEl().select('.x-panel-body').setStyle('background','transparent');
            //            p.getEl().select('.x-panel-body').setStyle('border','none'); 
            this.el.set({
                autocomplete: 'on'
            });
        } 
    },
    defaults: {
        anchor: '100%',
        allowBlank: false,
        msgTarget: 'side',
        labelWidth: 65,
        height: 22,        
        style: 'color:#15498B'
    },
    items: [{
        xtype: 'textfield',
        name: 'userId',
        cls: 'ui-ribbonbar-form',
        fieldLabel: '&nbsp;&nbsp;&nbsp;User&nbsp;Name',
        labelStyle: 'font-size:11px;margin-top:2px;',
        fieldSubTpl: ['<input id="{id}" type="{type}" ', '<tpl if="name">name="{name}" </tpl>', '<tpl if="size">size="{size}" </tpl>', '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 'class="{fieldCls} {typeCls}" autocomplete="on" />', {
            compiled: true, 
            disableFormats: true
        }]
    },{
        xtype: 'textfield',
        name: 'password',
        cls: 'ui-ribbonbar-form',
        fieldLabel: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Password',
        labelStyle: 'font-size:11px;margin-top:2px',
        inputType: 'password',
        fieldSubTpl: ['<input id="{id}" type="{type}" ', '<tpl if="name">name="{name}" </tpl>', '<tpl if="size">size="{size}" </tpl>', '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 'class="{fieldCls} {typeCls}" autocomplete="on" />', {
            compiled: true, 
            disableFormats: true
        }]
    }, signin, register]

//    buttons: [{
//        text: 'Submit',
//        action: 'login'
//    }]//,
//    {
//        text: 'Reset Form',
//        style: 'font-family: Georgia, serif;',
//        handler: function() {
//            this.up('form').getForm().reset();
//        }
//    }]
});
